<template>
  <div :class="['bw-design-node-css-cobtainer', isMax && 'bw-css-design-max']">
    <div class="bw-design-node-css-head">
      <span class="head-title"> 自定义样式 </span>

      <div class="head-extra" v-if="activeKey === 'css'">
        <a-tooltip v-if="!isMax" placement="top" title="最大化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-outlined"
            @click="onSize(true)"
          />
        </a-tooltip>

        <a-tooltip v-else placement="top" title="最小化">
          <Icon
            class="bw-extra-icon"
            icon="ant-design:fullscreen-exit-outlined"
            @click="onSize(false)"
          />
        </a-tooltip>
      </div>
    </div>

    <div class="bw-design-node-css-content">
      <component :is="curEle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useComCss } from './util'

const { isMax, curEle, activeKey, onSize } = useComCss()
</script>

<style lang="less" scoped>
.bw-design-node-css-cobtainer {
  margin: 0 16px;
  border-radius: 5px;
  width: calc(100% - 32px);
  height: calc(100% - 10px);
  border: 1px solid #e8e8e8;

  .bw-design-node-css-head {
    height: 35px;
    display: flex;
    padding: 0 8px;
    align-items: center;
    width: calc(100% - 16px);
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;

    .head-title {
      font-size: 14px;
      font-weight: 600;
    }

    .bw-extra-icon {
      margin-right: 8px;
    }
  }

  .bw-design-node-css-content {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    .bw-css-code-design {
      width: 100%;
      height: 100%;
    }
  }
}

.bw-css-design-max {
  top: 0;
  left: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 1200;
}
</style>
